<!-- 用户评论页面 -->
<template>
  <!-- 顶部导航区域 -->
  <van-nav-bar
    title="商品评价"
    left-arrow
    @click-left="onClickLift"
  >
    <template #right>
      <span>好评率：{{ commentsDetails.replyChance }}%</span>
    </template>
  </van-nav-bar>

  <!-- 评论列表区域 -->
  <van-cell-group class="comment" :border="false">
    <!-- 标签切换区域 -->
    <van-cell class="tags">
      <van-button
        :class="{ active: commentsDetails?.isSum }"
        round
        size="small"
        @click="handleChangeTag('0')"
      >
        全部 ({{ commentsDetails?.sumCount }})
      </van-button>

      <van-button
        :class="{ active: commentsDetails?.isGood }"
        round
        size="small"
        @click="handleChangeTag('1')"
      >
        好评 ({{ commentsDetails?.goodCount }})
      </van-button>

      <van-button
        :class="{ active: commentsDetails?.isIn }"
        round
        size="small"
        @click="handleChangeTag('2')"
      >
        中评 ({{ commentsDetails?.inCount }})
      </van-button>

      <van-button
        :class="{ active: commentsDetails?.isPoor }"
        round
        size="small"
        @click="handleChangeTag('3')"
      >
        差评 ({{ commentsDetails?.poorCount }})
      </van-button>
    </van-cell>

    <!-- 评价列表 -->
    <van-cell v-if="commentsDetails?.commentsList.length">
      <CommentItem
        v-for="reply in commentsDetails?.commentsList"
        :key="reply.id"
        :reply="reply"
      />
    </van-cell>

    <van-cell v-else>
      <van-empty
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="暂无评论"
      />
    </van-cell>
  </van-cell-group>
</template>

<script setup>
// -------------------------------- 导入模块 --------------------------------
// 导入 vue3 的 API
import { ref, reactive, toRefs, computed } from 'vue'

// 导入商品请求接口
// 1、getProductComments：获取商品评论
// 2、getCommentsByTag：根据分类获取评价
import { getProductComments, getCommentsByTag } from '@/api/comment_api'

// 导入自己封装的功能函数
import judgeRequest from '@/utils/judge_request' // 判断请求状态

// 导入组件
import CommentItem from '@/components/CommentItem.vue' // 评论列表组件

// -------------------------------- 声明数据 --------------------------------
// 接收父组件传递的数据
const props = defineProps({
  productId: {
    type: String,
    required: true
  }
})

const { productId } = toRefs(props) // 获取商品 id
// 存储评论的相关数据
const commentsDetails = reactive({
  commentCount: {}, // 存储评论详情信息
  commentsList: [], // 存储评论列表
  isActive: '0', // 控制显示评论显示状态
  replyChance: computed(() => commentsDetails.commentCount?.reply_chance || 100), // 好评率
  // 通过计算属性处理不同类型的评论个数
  sumCount: computed(() => commentsDetails.commentCount?.sum_count || 0), // 全部评论
  goodCount: computed(() => commentsDetails.commentCount?.good_count || 0), // 好评
  inCount: computed(() => commentsDetails.commentCount?.in_count || 0), // 中评
  poorCount: computed(() => commentsDetails.commentCount?.poor_count || 0), // 差评
  // 通过计算属性进行不同评论类型的判断，来控制活跃样式
  isSum: computed(() => commentsDetails.isActive === '0'), // 全部评论的状态
  isGood: computed(() => commentsDetails.isActive === '1'), // 好评的状态
  isIn: computed(() => commentsDetails.isActive === '2'), // 中评的状态
  isPoor: computed(() => commentsDetails.isActive === '3') // 差评的状态
})
const type = ref('0') // 要获取的评论的类型

// -------------------------------- 函数封装 ---------------------------------
// 返回按钮事件
const onClickLift = () => history.back()

// 获取商品评论详情函数
const initCommentsList = async (productId) => {
  const data = await getProductComments(productId) // 发送请求
  const result = judgeRequest(data.status, '获取商品评论详情数据失败！') // 判断请求结果

  // 请求成功
  if (result) {
    commentsDetails.commentCount = data.data // 获取评论详情数据
  }
}

// 根据评论类型获取评论列表
const initCommentsByTag = async (productId, type) => {
  const data = await getCommentsByTag(productId, type) // 发送请求
  const result = judgeRequest(data.status, '获取商品评论列表数据失败！') // 判断请求结果

  // 请求成功
  if (result) {
    commentsDetails.commentsList = data.data // 获取具体的评论列表数据
  }
}

// 切换评论标签的事件
const handleChangeTag = (type) => {
  commentsDetails.isActive = type // 更改要活跃的标签类型

  // 重新发送请求，更新评论列表
  initCommentsByTag(productId.value, type)
}

// -------------------------------- 函数调用 ---------------------------------
initCommentsList(productId.value) // 调用请求商品评论详情的函数
initCommentsByTag(productId.value, type.value) // 调用根据评论类型获取评论列表的函数
</script>

<style lang="scss" scoped>
// 整体区域
.comment {
  // 标签切换栏区域
  .tags {
    .van-button {
      margin-right: 10px;
    }

    .active {
      background-color: #FBC546;
    }
  }
}

</style>
